<template>
  <div>
    <div class="title_box mt-30">
      <p class="title">荣誉资质</p>
      <div class="line"></div>
    </div>

    <div class="mt-16 clearfix">
      <div class="honor_box" v-for="(item, index) in EntHonorList" :key="index" @click="handleClick(item)">
        <img class="honor_img" v-if="item.attachment" :src="getImageUrl(item.attachment)" alt="" />
        <img class="honor_img" v-else src="@/assets/images/defult_img.png" alt="" />
        <p class="honor_title">{{ item.name }}</p>
      </div>
    </div>
    <a-pagination class="tr mt-20" :pageSize="4" @change="ChangeHonor" :hideOnSinglePage="true" v-model="Honorcurrent"
      :total="Honortotal" show-less-items />
    <QualificationsDetail :ZZDetailsshow="ZZDetailsshow" :ZZList="ZZList" @close="closeDetail" />

  </div>
</template>

<script>

import QualificationsDetail from './QualificationsDetail.vue'
import { getClientUseQualificantionList } from '@/apis/com/qualification'
export default {
  components: {
    QualificationsDetail
  },
  data () {
    return {
      ZZDetailsshow: false,
      ZZList: {},
      EntHonorList: [], //荣誉资质
      Honortotal: 0, //总页数
      Honorcurrent: 1, //当前页码
    }
  },
  mounted () {
    this.getEntEntHonorPageList();
  },
  methods: {
    ChangeHonor (page, pageSize) {
      this.Honorcurrent = page;
      this.getEntEntHonorPageList();
    },
    // 荣誉资质
    getEntEntHonorPageList () {
      let _params = {
        pageNum: this.Honorcurrent,
        pageSize: 4,
        companyId: this.$route.query.id,
        approvalSt: 1,
        type: 2,
      };
      getClientUseQualificantionList(_params)
        .then((res) => {
          console.log("荣誉资质");
          console.log(res);
          if (res.code == 200) {
            this.EntHonorList = res.rows;
            this.Honortotal = res.total;
          }
        })
        .catch((error) => { });
    },

    handleClick (row) {
      this.ZZDetailsshow = true
      this.ZZList = row
    },

    closeDetail () {
      this.ZZDetailsshow = false
      this.ZZList = []
    },
  },
}

</script>

<style lang="less" scoped>
.title_box {
  border-bottom: solid 1px #ebeef5;

  .title {
    font-size: 16px;
    line-height: 14px;
    letter-spacing: 0px;
    color: #303133;
  }

  .line {
    width: 20px;
    height: 4px;
    background-color: #188af1;
    margin-top: 8px;
  }
}

.honor_box {
  width: 272px;
  padding: 13px;
  float: left;
  box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.16);
  margin-left: 20px;
  text-align: center;
  cursor: pointer;

  &:nth-child(1) {
    margin-left: 0;
  }

  .honor_img {
    width: 100%;
    height: 174px;
    padding-bottom: 18px;
    object-fit: contain;
  }

  .honor_title {
    border-top: solid 1px #ebeef5;
    padding-top: 20px;
    color: #303030;
    font-size: 14px;
  }
}
</style>